// 退换货
<template>
  <div class="ReturnGoods" v-loading="loading">
    <nav-login></nav-login>
    <div class="w1200">
      <div class="logo">
        <img @click="jumphome" src="@/assets/logo/logo1.jpg" alt>
      </div>
      <p class="logo_bottom">
        <span>我的孚地 > 已经买到的商品</span>
        <span>客服热线：0431-87011222</span>
      </p>
      <div class="ReturnGoodsDetails">
        <div class="w1150">
          <div class="title">
            <img :src="goods.goods_logo" alt>
            <div class="introduce">
              <h3>{{goods.goods_title}}</h3>
              <p>数 量：{{goods.number}}</p>
              <p>单 价：￥{{goods.selling_price}}</p>
            </div>
          </div>
          <p class="selectText">
            <!-- 选择服务类型 -->
          </p>
          <ul>
            <li v-for="item in lists" :key="item.id" @click="jumpstep(item.id)">
              <img :src="item.imgsrc">
              <div>
                <h3>{{ item.title }}</h3>
                <p>{{ item.des }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="describe">
        <h3>常见问题</h3>
        <ol>
          <li v-for="(item,index) in des" :key="index">
            <p>{{ item.title }}</p>
            <span>{{ item.des }}</span>
          </li>
        </ol>
      </div>
    </div>
    <home-footer></home-footer>
  </div>
</template>
<script>
import icon1 from "@/assets/icon/returnGoods01.png"
import icon2 from "@/assets/icon/returnGoods02.png"
import icon3 from "@/assets/icon/returnGoods03.png"
export default {
  name: "ReturnGoods",
  data() {
    return {
      loading: false,
      goods: {},
      order_no: '',
      lists: [
        // {
        //   imgsrc: icon1,
        //   title: "仅退款",
        //   des: "未收到货（包含未签收），或卖家协商同意前提下",
        //   id: 0
        // },
        {
          imgsrc: icon2,
          title: "退货退款",
          des: "已收到货，需要退还已收到的货物",
          id: 1
        },
        // {
        //   imgsrc: icon3,
        //   title: "换货",
        //   des: "已收到货，需要更换已收到的货",
        //   id: 2
        // }
      ],
      des: [
        {
          title: "1、卖家不发货，怎么办？",
          des:
            "亲，孚地卖场会准时为您发货，若超出发货期（发货期**日内），迟迟不发货，您可以取消订单，申请退款。"
        },
        {
          title: "2、如何申请退款？",
          des: "亲，根据您的订单状态的不同，申请的方式也是不一样的。 "
        },
        {
          title: "3、申请退款后，交易退款成功，钱退到哪里？",
          des:
            "亲，要先查看退款状态哦，只有当订单的退款状态显示【退款成功】时，钱款才会退回原先的支付渠道。"
        }
      ]
    }
  },
  methods: {
    // logo 的 跳转到主页
    jumphome() {
      this.$router.push("/")
    },

    // 跳转到步骤的链接
    jumpstep(index) {
      switch (index) {
        case 0:
          this.$router.push({
            name: "ReturnState",
            params: {
              index: 1
            }
          })
          break
        case 1:
          this.$router.push({
            name: "ReturnState",
            params: {
              index: 2
            }
          })
          break
        case 2:
          this.$router.push({
            name: "ReturnState",
            params: {
              index: 3
            }
          })
          break
      }
    },
    // 步骤与获取退货编码的信息的并发的请求
    // 并发请求时候 要注意：****** 子函数中 return await
    //   axios.all([getUserAccount(), getUserPermissions()])
    // .then(axios.spread(function (acct, perms) {
    //   // 两个请求现在都执行完成
    // }))
    async getReturnGoodsAndStep() {
      this.loading = true
      let id = this.$store.state.ReturnedGoods.goods.id
      try {
        this.$http.all([this.getStep(id), this.getReturnNumber(id)])
          .then(this.$http.spread((acct, perms) => {
            console.log(acct, perms)
            if (acct.data.State.Code == 200 || perms.data.State.Code == 200) {
              let page = acct.data.data
              this.$store.commit("changeStep", page)
              this.$store.commit("ReturnNumber", perms.data.data)
              this.loading = false
            }
          }))
      } catch (error) {
        console.log('步骤与获取退货编码的信息的出现了问题..')
      }

    },

    // 获取显示步骤
    async getStep(id) {
      return await this.$http({
        method: 'post',
        url: 'index/api/verification',
        data: {
          id
        }
      })
    },
    // 获取退货编码的信息
    async getReturnNumber(id) {
      return await this.$http({
        method: 'post',
        url: 'index/api/refundData',
        data: {
          id
        }
      })
    }
  },
  mounted() {
    this.goods = this.$store.state.ReturnedGoods.goods
    this.order_no = this.$store.state.ReturnedGoods.order_no
    this.getReturnGoodsAndStep()
  }
}
</script>
<style lang="scss" scoped>
.ReturnGoods {
  width: 100%;
  .w1200 {
    width: 1200px;
    margin: auto;
    .logo {
      img {
        cursor: pointer;
      }
    }
    .logo_bottom {
      color: #5b5b5b;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 20px;
      font-size: 14px;
      span {
        &:last-child {
          font-size: 12px;
          color: #8c8c8c;
        }
      }
    }
    .ReturnGoodsDetails {
      width: 100%;
      border: 1px solid #e5e5e5;
      margin-bottom: 26px;
      .w1150 {
        width: 1150px;
        margin: auto;
        .title {
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 15px 0px;
          border-bottom: 1px solid #e5e5e5;
          img {
            width: 74px;
            height: 74px;
            margin-right: 20px;
          }
          .introduce {
            h3 {
              font-weight: normal;
              line-height: 40px;
            }
            p {
              color: #8d8d8d;
            }
          }
        }
        .selectText {
          margin: 29px 0px 26px 0px;
          font-size: 16px;
          color: #3f3f3f;
        }
        ul {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          li {
            width: 522px;
            height: 138px;
            border: 1px solid #e5e5e5;
            border-radius: 5px;
            margin-bottom: 20px;
            margin-right: 30px;
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
            img {
              width: 44px;
              height: 44px;
              margin: 0 25px;
            }

            &:hover {
              border: 1px solid #008cff;
            }
            h3 {
              line-height: 48px;
            }
            &:last-child {
              margin-bottom: 40px;
            }
            p {
              color: #878787;
            }
            &:first-child {
              img {
                width: 48px;
                height: 44px;
                margin: 0 25px;
              }
            }
          }
        }
      }
    }
    .describe {
      width: 1175px;
      height: 288px;
      padding-left: 25px;
      background: #f8f8f8;
      margin-bottom: 172px;
      h3 {
        line-height: 48px;
        padding-top: 22px;
      }
      li {
        margin-bottom: 15px;
        p {
          line-height: 28px;
          color: #191919;
        }
        span {
          line-height: 22px;
          color: #656565;
        }
      }
    }
  }
}
</style>

